<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form label-position="right" :rules="rules" :model="filters" :label-width="90" inline>
                    <p style="font-size: 24px">{{filters.housingName}} - {{filters.name}}</p>
                </Form>
            </Row>
            <Row class="form-row">
                <img :src="url"/>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" size="large" @click="handleUpdate('新增')">
                    新增
                </Button>
            </Row>
            <el-table stripe border :data="tableData" size="large" ref="table">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="address" label="地点"></el-table-column>
                <el-table-column prop="coordinate" label="经纬度"></el-table-column>
                <el-table-column prop="patrolOrder" label="序号"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleUpdate('修改',scope.row)">修改
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" :mask-closable="false" :closable="false" :title="modalTitle"
               width="900">
            <Form :model="modal" :rules="rules" ref="form2" label-position="right" :label-width="110"
                  class="myOpenFrom">
                <FormItem label="巡更地点" prop="address">
                    <Input v-model="modal.address" placeholder="巡更地点" size="large" required="true"/>
                </FormItem>
                <FormItem label="经纬度" prop="coordinate">
                    <Input id="coordinate" readonly v-model="modal.coordinate" placeholder="请在地图上选取" size="large"
                           required="true"/>
                </FormItem>
                <FormItem label="巡更顺序" prop="patrolOrder">
                    <el-input-number v-model="modal.patrolOrder" :min="1" style="width: 100%"></el-input-number>
                </FormItem>
                <iframe ref="iframe" id="iframe" style="width: 100%; height: 350px">

                </iframe>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
        <input v-model="communityLocations" type="hidden" id="communityLocations">
    </Row>
</template>
<script>
    export default {
        data() {
            return {
                //校验规则
                rules: {
                    housingId: [
                        {
                            required: true,
                            message: "小区不能为空",
                        }
                    ],
                    route: [
                        {
                            required: true,
                            message: "巡更路线不能为空",
                        }
                    ],
                    address: [
                        {required: true, message: "巡更地点不能为空",}
                    ],
                    patrolOrder: [
                        {
                            required: true,
                            message: "巡更顺序不能为空",
                        }
                    ],
                },
                houseList: [],
                routeList: [],
                addressList: [],
                //新增修改弹窗标题
                modalTitle: '新增',
                url: '',
                communityLocations:'',
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                formVisible: false,
                modal: {
                    coordinate: '',
                },
                filters: {},
                //表单提交状态
                formLoading: false,
                tableData: [],
            };
        },

        created: function () {
            this.getParams();
        },
        mounted: function () {
            // this.handleOnCoordinateChange()
        },
        methods: {
            getParams() {
                // 取到路由带过来的参数
                let routeId = this.$route.query.routeId;
                this.filters.routeId = routeId;
                this.loadData();
            },
            //加载地图
            loadMap() {
                this.postRequest("/api/patrol/loadMap?routeId=" + this.filters.routeId).then(res => {
                    console.log(res);
                    if (res.code == 20000) {
                        this.url = res.data.url;
                        this.communityLocations = res.data.communityLocations;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载数据
            loadData() {
                let params = this.filters;
                params.route = this.filters.routeId
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/patrol/addressLoadData", params).then(res => {
                    if (res.code == 20000) {
                        this.tableData = res.data.pageInfo.list;
                        this.pageTotal = res.data.pageInfo.total;
                        this.filters.housingName = res.data.routeList[0].housingName;
                        this.filters.hosuingId = res.data.routeList[0].housingId;
                        this.filters.name = res.data.routeList[0].name;
                        this.loadMap();
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },

            //打开页面
            handleUpdate(str, row) {
                this.$refs.iframe.src="/map.html";
                this.formVisible = true;
                if (str == '修改') {
                    this.modalTitle = '修改';
                    this.modal.housingId = this.filters.hosuingId;
                    this.modal.address = row.address;
                    this.modal.patrolOrder = row.patrolOrder;
                    this.modal.route = row.route;
                    this.modal.id = row.id;
                } else {
                    this.modal = {};
                    this.modal.housingId = this.filters.hosuingId;
                    this.modal.route = this.filters.routeId;
                    this.getRequest("/api/patrol/getPatrolOrderMax?routeId=" + this.filters.routeId).then(res => {
                        if (res.code == 20000) {
                            this.modal.patrolOrder = res.data + 1;
                        }
                    })
                }
            },
            //保存
            handleSubmit() {
                this.$refs["form2"].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        let params = this.modal;
                        params.coordinate = document.getElementById('iframe').contentWindow.document.getElementById('lnglat').innerHTML;
                        this.postRequest("/api/patrol/saveOrUpdateAddress", params).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.formLoading = false;
                                this.formVisible = false;
                                this.$refs["form2"].resetFields();
                                this.$Message.success("保存成功！");
                                this.loadData();
                            } else {
                                this.formLoading = false;
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },
            //取消
            onCancel() {
                this.formLoading = false;
                this.formVisible = false;
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            //删除
            handleDelete: function (id) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/patrol/deleteAddress?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                });
            },
        }
    };
</script>
